<template>
    <div class="role">
        <el-button size="medium" type="primary" plain @click="add">
            新增单位
        </el-button>
        <div class="role-table">
            <el-table :data="tableData" border style="width: 100%" height="100%">
                <el-table-column prop="unitMeasure" label="计量单位"> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="update(scope.row)">编辑</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button size="small" type="text" @click="remove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="50%" :show-close="false" :title="dialogTitle">
            <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="计量单位" prop="unitMeasure">
                    <el-input placeholder="请输入计量单位" v-model="dialogForm.unitMeasure"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitBtnDialog('dialogForm')" v-debounce>
                    确 定
                </el-button>
                <el-button @click="cancleBtn">取 消</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="removeDialog" width="50%" :show-close="false" title="删除">
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="removeBtnDialog('dialogForm')" v-debounce>
                    确 定
                </el-button>
                <el-button @click="cancleBtn">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import unitMeasure from '../../api/unitMeasure';

export default {
    data() {
        return {
            tableData: new Array(),
            dialogVisible: false,
            removeDialog: false,
            dialogTitle: "",
            dialogForm: {
                id: void 0,
                unitMeasure: void 0,
            },
            rules: {
                name: [
                    { required: true, message: "请输入计量单位", trigger: "blur" }
                ],
            }
        }
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        getTableData() {
            this.$axios.get("/unitMeasure/getUnitMeasure").then(res => {
                this.tableData = res.data
            });
        },
        add() {
            this.dialogVisible = true
            this.dialogTitle = "添加"
        },
        update(value) {
            this.dialogVisible = true
            this.dialogTitle = "修改"
            this.dialogForm.id = value.id
            this.dialogForm.unitMeasure = value.unitMeasure
        },
        remove(value) {
            this.removeDialog = true
            this.dialogForm.id = value.id
            this.dialogForm.unitMeasure = value.unitMeasure
        },
        submitBtnDialog() {
            if (this.dialogTitle == "添加") {
                this.dialogForm.id = 12345
                unitMeasure.addUnitMeasure(this.dialogForm).then(res => {
                    this.dialogForm.id = void 0
                    this.dialogForm.unitMeasure = void 0
                    this.dialogVisible = false
                    this.$message(res.message)
                    this.getTableData()
                })
            } else if (this.dialogTitle == "修改") {
                unitMeasure.updateUnitMeasure(this.dialogForm).then(res => {
                    this.dialogForm.id = void 0
                    this.dialogForm.unitMeasure = void 0
                    this.dialogVisible = false
                    this.$message(res.message)
                    this.getTableData()
                })
            } else {
                console.log("异常")
            }
        },
        cancleBtn() {
            this.dialogForm.id = void 0
            this.dialogForm.unitMeasure = void 0
            this.dialogVisible = false
            this.removeDialog = false
        },
        removeBtnDialog() {
            unitMeasure.deleteUnitMeasure(this.dialogForm).then(res => {
                this.dialogForm.id = void 0
                this.dialogForm.unitMeasure = void 0
                this.removeDialog = false
                this.$message(res.message)
                this.getTableData()
            })
        }
    }
}
</script>

<style scoped>
.role {
    height: 100%;
}

.role-table {
    height: 94%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    margin-top: 10px;
}
</style>